import * as echarts from 'echarts';

// 基础图表配置
const baseChartConfig = {
  animation: true,
  animationDuration: 1000,
  animationEasing: 'cubicInOut',
  animationDelay: function (idx) {
    return idx * 100;
  },
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    top: '10%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  }
};
//活动统计部分
// 活动趋势图表配置
export const getTrendConfig = (data = []) => ({
  animation: true,
  animationDuration: 1000,
  animationEasing: 'cubicInOut',
  animationDelay: function (idx) {
    return idx * 100;
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderColor: '#e6e9ed',
    borderWidth: 1,
    textStyle: { color: '#333' },
    padding: [8, 12]
  },
  grid: {
    top: '15%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisLine: { lineStyle: { color: '#e6e9ed' } },
    axisLabel: { color: '#666' }
  },
  yAxis: {
    type: 'value',
    name: '活动次数',
    nameTextStyle: { color: '#666' },
    axisLine: { lineStyle: { color: '#e6e9ed' } },
    axisLabel: { color: '#666' },
    splitLine: { lineStyle: { color: '#f5f5f5' } }
  },
  series: [{
    data: data.length > 0 ? data : [30, 40, 35, 50, 45, 35, 40],
    type: 'line',
    smooth: true,
    lineStyle: {
      width: 3,
      color: '#6366f1'
    },
    areaStyle: {
      opacity: 0.2,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#6366f1' },
        { offset: 1, color: 'rgba(99, 102, 241, 0.1)' }
      ])
    }
  }]
});

// 时段活跃度图表配置
// 时段活跃度图表配置
export const getTimeDistributionConfig = (data = []) => ({
  animation: true,
  animationDuration: 1000,
  animationEasing: 'cubicInOut',
  animationDelay: function (idx) {
    return idx * 150;
  },
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderWidth: 1,
    textStyle: { color: '#333' },
    padding: [8, 12],
    formatter: '{b}: {c}次 ({d}%)'
  },
  legend: {
    top: '5%',
    left: 'center',
    textStyle: { color: '#666' }
  },
  series: [{
    name: '时段活跃度',
    type: 'pie',
    radius: '60%', // 实心饼图，设置单一半径
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 10,
      borderColor: '#fff',
      borderWidth: 2
    },
    label: {
      show: true,
      formatter: '{b}: {d}%',
      color: '#666'
    },
    emphasis: {
      label: {
        show: true,
        fontSize: 14,
        fontWeight: 'bold'
      },
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.2)'
      }
    },
    data: data.length > 0 ? data : [
      { value: 320, name: '上午', itemStyle: { color: '#FFA07A' } },
      { value: 240, name: '下午', itemStyle: { color: '#98FB98' } },
      { value: 180, name: '晚上', itemStyle: { color: '#87CEFA' } }
    ]
  }]
});    
// 功能使用占比图表配置
export const getFunctionUsageConfig = (data = []) => ({
  animation: true,
  animationDuration: 1000,
  animationEasing: 'cubicInOut',
  animationDelay: function (idx) {
    return idx * 120;
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderColor: '#e6e9ed',
    borderWidth: 1,
    textStyle: { color: '#333' },
    padding: [8, 12],
    formatter: '{b}: {c}次'
  },
  grid: {
    top: '15%',
    left: '15%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: {
    show: false
  },
  yAxis: [
    {
      type: 'category',
      inverse: true,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { color: '#666' },
      data: ['语音库', '文本转语音', '个性语音讲解', '课件制作', '下载导出']
    },
    {
      type: 'category',
      inverse: true,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { color: '#666' },
      data: data.length > 0 ? data.map(v => v + '次') : [150, 200, 180, 120, 90].map(v => v + '次')
    }
  ],
  series: [
    {
      name: '使用次数',
      type: 'bar',
      barCategoryGap: 50,
      barWidth: 10,
      yAxisIndex: 0,
      itemStyle: {
        barBorderRadius: 20,
        color: function(params) {
          const colors = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
          return colors[params.dataIndex];
        }
      },
      label: {
        show: true,
        position: 'inside',
        formatter: '{c}%'
      },
      data: data.length > 0 ? data.map(v => Math.round(v / Math.max(...data) * 100)) : [75, 80, 90, 60, 45]
    },
    {
      name: '框',
      type: 'bar',
      barCategoryGap: 50,
      barWidth: 14,
      yAxisIndex: 1,
      itemStyle: {
        color: 'none',
        borderColor: '#00c1de',
        borderWidth: 2,
        barBorderRadius: 15
      },
      data: [100, 100, 100, 100, 100]
    }
  ]
})

//内容分布部分

// 字数分布图表配置
export const getWordCountConfig = (data = []) => ({
  animation: true,
  animationDuration: 1000,
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderColor: '#e6e9ed',
    borderWidth: 1,
    textStyle: { color: '#333' },
    padding: [8, 12]
  },
  xAxis: {
    type: 'category',
    data: ['800-1000', '1000-1200', '1200-1400', '1400-1600', '1600-1800', '1800-2000'],
    axisLine: { lineStyle: { color: '#e6e9ed' } },
    axisLabel: { color: '#666' }
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#e6e9ed' } },
    axisLabel: { color: '#666' },
    splitLine: { lineStyle: { color: '#f5f5f5' } }
  },
  series: [{
    data: data.length > 0 ? data : [150, 230, 280, 320, 250, 190],
    type: 'line',
    smooth: true,
    lineStyle: {
      width: 3,
      color: '#6366f1'
    },
    areaStyle: {
      opacity: 0.2,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#6366f1' },
        { offset: 1, color: 'rgba(99, 102, 241, 0.1)' }
      ])
    },
    markLine: {
      data: [{ type: 'average', name: '平均值' }],
      symbol: ['none', 'none'],
      lineStyle: { color: '#10b981' },
      label: { color: '#10b981' }
    }
  }]
});

// 课件时长分布图表配置
export const getDurationConfig = (data = []) => ({
  animation: true,
  animationDuration: 1000,
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderColor: '#e6e9ed',
    borderWidth: 1,
    textStyle: { color: '#333' },
    padding: [8, 12]
  },
  grid: {
    top: '12%',
    left: '3%',
    // right: '4%',
    // bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#e6e9ed' } },
    axisLabel: { color: '#666' },
    splitLine: { lineStyle: { color: '#f5f5f5' } }
  },
  yAxis: {
    type: 'category',
    data: ['3-5分钟', '5-8分钟', '8-10分钟', '10-12分钟', '12-15分钟'],
    axisLine: { lineStyle: { color: '#e6e9ed' } },
    axisLabel: { 
      color: '#666',
      formatter: function(value) {
        return value;
      }
    }
  },
  series: [{
    type: 'bar',
    data: data.length > 0 ? data : [120, 200, 280, 180, 140],
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: '#60a5fa' },
        { offset: 1, color: '#3b82f6' }
      ]),
      borderRadius: [0, 4, 4, 0]
    },
    emphasis: {
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#93c5fd' },
          { offset: 1, color: '#60a5fa' }
        ])
      }
    }
  }]
});

// 资源使用情况图表配置
export const getResourceConfig = (data = []) => ({
  animation: true,
  animationDuration: 1000,
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderWidth: 2,
    textStyle: { color: '#333' },
    padding: [8, 12],
    formatter: '{b}: {c} ({d}%)',
    borderColor: function(params) {
      return params.color;
    }
  },
  legend: {
    top: '5%',
    left: 'center',
    textStyle: { color: '#666' }
  },
  series: [
    {
      name: '资源使用',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        formatter: '{b}: {d}%',
        color: '#666'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 14,
          fontWeight: 'bold'
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.2)'
        }
      },
      data:
        data.length > 0
          ? data
          : [
              { value: 580, name: '图片资源', itemStyle: { color: '#3b82f6' } },
              { value: 484, name: '音频资源', itemStyle: { color: '#91cc75' } },
              { value: 300, name: '视频资源', itemStyle: { color: '#6366f1' } }
            ]
    }
  ]
})

// 声音使用比例图表配置
export const getVoiceConfig = (data = []) => ({
  animation: true,
  animationDuration: 1000,
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderWidth: 1,
    textStyle: { color: '#333' },
    padding: [8, 12],
    formatter: '{b}: {c} ({d}%)',
    borderColor: function(params) {
      return params.color;
    }
  },
  legend: {
    top: '5%',
    left: 'center',
    textStyle: { color: '#666' }
  },
  series: [
    {
      name: '声音使用',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        formatter: '{b}: {d}%',
        color: '#666'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 14,
          fontWeight: 'bold'
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.2)'
        }
      },
      data:
        data.length > 0
          ? data
          : [
              { value: 735, name: '预设声音', itemStyle: { color: '#3b82f6' } },
              { value: 580, name: '自定义录音', itemStyle: { color: '#ffdc60' } }
            ]
    }
  ]
})

// 初始化图表实例
export const initChart = (dom, option) => {
  if (!dom) return null;
  const chart = echarts.init(dom);
  chart.setOption(option);
  return chart;
};

// 响应式调整图表大小
export const resizeChart = (chart) => {
  if (chart) {
    chart.resize();
  }
};

//首页图表部分

// 用户活跃度趋势图配置
export const getUserActivityConfig = (data = []) => ({
  animation: true,
  animationDuration: 1000,
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderColor: '#e6e9ed',
    borderWidth: 1,
    textStyle: { color: '#333' },
    padding: [8, 12]
  },
  grid: {
    top: '15%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
    axisLine: { lineStyle: { color: '#e6e9ed' } },
    axisLabel: { color: '#666' }
  },
  yAxis: {
    type: 'value',
    name: '活跃用户',
    nameTextStyle: { color: '#666' },
    axisLine: { lineStyle: { color: '#e6e9ed' } },
    axisLabel: { color: '#666' },
    splitLine: { lineStyle: { color: '#f5f5f5' } }
  },
  series: [{
    name: '活跃用户',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 8,
    data: data.length > 0 ? data : [120, 200, 350, 400, 380, 300, 150],
    lineStyle: {
      width: 4,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#6366f1' },
        { offset: 1, color: '#60a5fa' }
      ])
    },
    itemStyle: {
      color: '#6366f1',
      borderWidth: 2,
      borderColor: '#fff'
    },
    areaStyle: {
      opacity: 0.3,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#6366f1' },
        { offset: 1, color: 'rgba(99, 102, 241, 0.1)' }
      ])
    }
  }]
});

// 系统功能使用占比图配置
export const getSystemUsageConfig = (data = []) => ({
  animation: true,
  animationDuration: 1000,
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderWidth: 1,
    textStyle: { color: '#333' },
    padding: [8, 12],
    formatter: '{b}: {c}次 ({d}%)'
  },
  legend: {
    top: '5%',
    left: 'center',
    textStyle: { color: '#666' }
  },
  series: [{
    name: '功能使用',
    type: 'pie',
    radius: ['35%', '60%'],
    center: ['50%', '55%'],
    avoidLabelOverlap: true,
    itemStyle: {
      borderRadius: 10,
      borderColor: '#fff',
      borderWidth: 2
    },
    label: {
      show: true,
      position: 'outside',
      formatter: '{b}\n{d}%',
      color: '#666',
      fontSize: 12,
      lineHeight: 16,
      padding: [6, 8],
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      borderRadius: 1,
      distance: 10
    },
    labelLine: {
      length: 15,
      length2: 20,
      smooth: true
    },
    emphasis: {
      label: {
        show: true,
        fontSize: 14,
        fontWeight: 'bold'
      },
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.2)'
      }
    },
    data: data.length > 0 ? data : [
      { value: 350, name: '语音库', itemStyle: { color: '#6366f1' } },
      { value: 420, name: '文本转语音', itemStyle: { color: '#60a5fa' } },
      { value: 280, name: '个性语音讲解', itemStyle: { color: '#34d399' } },
      { value: 180, name: '课件制作', itemStyle: { color: '#fbbf24' } }
    ]
  }]
});

// 导出基础配置
export {
  baseChartConfig
};

